<template>
  <a-card size="small" :bordered="false" title="文件列表">
    <div class="table-operator">
      <a-form v-if="showSearch" layout="inline" :model="params" @submit="handleSearch">
        <a-form-item label="文件名称">
          <a-input v-model:value="params.fileName" placeholder="请输入文件名称" />
        </a-form-item>
        <a-form-item label="文件分组" name="groupId">
          <a-tree-select
            v-model:value="params.groupId"
            style="width: 150px"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="groupListTreeSelect"
            placeholder="全部"
            tree-default-expand-all
            :allow-clear="true"
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item label="文件类型">
          <a-select v-model:value="params.fileType" style="width: 100px" placeholder="全部" :allow-clear="true">
            <a-select-option v-for="item in FileTypeEnum.$options()" :key="item.value" :value="item.value">{{
              item.label
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="文件来源">
          <a-select v-model:value="params.fileSource" style="width: 100px" placeholder="全部" :allow-clear="true">
            <a-select-option v-for="item in FileSourceEnum.$options()" :key="item.value" :value="item.value">{{
              item.label
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" :loading="tableLoading" html-type="submit">
            <template #icon><SearchOutlined /></template>
            <span v-if="!tableLoading">搜索</span>
            <span v-else>搜索中...</span>
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <table-toolbar
      v-model:show-search="showSearch"
      v-model:columns="tableColumns"
      style="margin-top: 10px"
      @reload="handleLoadData"
    >
      <template #left>
        <a-button type="primary" :disabled="!hasSelected" @click="handleMoveToolbar">
          <template #icon><SwapOutlined /></template>
          移动
        </a-button>
        <a-button type="primary" :disabled="!hasSelectOne" @click="handleEditToolbar">
          <template #icon><EditOutlined /></template>
          编辑
        </a-button>
        <a-button type="primary" danger :disabled="!hasSelected" @click="handleDelToolbar">
          <template #icon><DeleteOutlined /></template>
          删除
        </a-button>
      </template>
    </table-toolbar>
    <a-table
      :loading="tableLoading"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange
      }"
      :columns="tableColumns"
      :data-source="tableDataSource"
      :pagination="pageInfo"
      row-key="fileId"
      size="middle"
      @change="handlePageChange"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.key === 'image'">
          <image-box :src="record.url"></image-box>
        </template>
        <template v-else-if="['tag', 'fileSource', 'fileType'].includes(column.key)">
          <a-tag :color="text.color">{{ text.label }}</a-tag>
        </template>
        <template v-else-if="column.key === 'action'">
          <a-button type="primary" size="small" style="margin-right: 5px" @click="handleEdit(record.fileId)">
            <template #icon><FormOutlined /></template>
            编辑
          </a-button>

          <a-popconfirm title="确定删除吗?" ok-text="确定" cancel-text="取消" @confirm="handleDel(record.fileId)">
            <a-button type="primary" danger size="small" style="margin-right: 5px">
              <template #icon><DeleteOutlined /></template>
              删除
            </a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>

    <file-edit ref="editRef" @reload="handleLoadData" />
    <move-group ref="moveGroupRef" @handle-submit="handleSearch" />
  </a-card>
</template>

<script name="AttachFileIndex" lang="ts" setup>
import { delFiles, getPage } from "@/api/content/attachFile";
import { getTree } from "@/api/content/attachGroup";
import { formatTreeSelect } from "@/utils/format";
import { FileTypeEnum, FileSourceEnum } from "@/enums/content";
import FileEdit from "./edit.vue";

const showSearch = ref<boolean>(true);
const params = reactive({
  fileName: "",
  groupId: undefined,
  fileSource: undefined,
  fileType: undefined
});

//表格
const tableColumns = ref<TableColumn[]>([
  {
    key: "fileId",
    dataIndex: "fileId",
    title: "文件ID",
    visible: false
  },
  {
    key: "image",
    title: "文件预览"
  },
  {
    key: "fileName",
    dataIndex: "fileName",
    title: "文件名称"
  },
  {
    key: "fileSource",
    dataIndex: "fileSource",
    title: "文件来源"
  },
  {
    key: "fileType",
    dataIndex: "fileType",
    title: "文件类型"
  },
  {
    key: "fileSize",
    dataIndex: "fileSize",
    title: "文件大小"
  },
  {
    key: "fileExt",
    dataIndex: "fileExt",
    title: "文件后缀"
  },
  {
    key: "createTime",
    dataIndex: "createTime",
    title: "创建时间",
    visible: false
  },
  {
    key: "action",
    title: "操作",
    fixed: "right"
  }
]);

const { tableLoading, pageInfo, tableDataSource, handleLoadData, handlePageChange, handleSearch } = useTablePage(
  params,
  getPage
);

//表格选择
const { selectId, selectedRowKeys, hasSelected, hasSelectOne, onSelectChange } = useTableSelect();

// 文件分组
const groupListTree = ref<any>([]);
const groupListTreeSelect = ref<any>([]);
const getGroupList = () => {
  tableLoading.value = true;
  getTree()
    .then(response => {
      const selectItems: any = [
        {
          title: "未分组",
          key: 0,
          value: 0
        }
      ];
      groupListTree.value = formatTreeSelect(response.data);
      groupListTreeSelect.value = selectItems.concat(groupListTree.value);
      tableLoading.value = false;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
provide("selectDataSource", groupListTree);

const moveGroupRef = ref();
const handleMoveToolbar = () => {
  moveGroupRef.value.show(selectedRowKeys.value);
};

const editRef = ref();
const handleEdit = (fileId: number) => {
  editRef.value.handleEdit(fileId);
};

const handleEditToolbar = () => {
  handleEdit(selectId.value);
};

const handleDel = (id: number) => {
  tableLoading.value = true;
  delFiles(id)
    .then(() => {
      handleLoadData();
      antdMessage.success("删除成功");
    })
    .finally(() => {
      tableLoading.value = false;
    });
};

const handleDelToolbar = () => {
  antdModal.confirm({
    title: "警告",
    icon: createVNode(ExclamationCircleOutlined),
    content: "你确定要删除选中的角色吗?",
    onOk() {
      tableLoading.value = true;
      delFiles(selectedRowKeys.value)
        .then(() => {
          handleLoadData();
          antdMessage.success("删除成功");
        })
        .finally(() => {
          tableLoading.value = false;
        });
    }
  });
};

onMounted(() => {
  getGroupList();
  handleLoadData();
});
</script>
